<template>
  <div class="echart_container">
    <div class="left">
      <div class="box" v-for="(e, i) in e_list" :key="i" @click="handleClick(e, i + 1)">
        <div class="box_content">
          <div>{{ e.label }}</div>
          <div class="img">
            <img src="" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div ref="echarts" class="z_echart"></div>
    </div>
    <div class="right">
      <el-select v-if="['柱状图例'].includes(title)" v-model="selectData" clearable placeholder="请选择数据"
        @change="changeSelect">
        <el-option v-for="item in e_data" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-else-if="['折线图例'].includes(title)" v-model="selectData" clearable placeholder="请选择数据"
        @change="changeSelect">
        <el-option v-for="item in e_line_data" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-else v-model="selectData" clearable placeholder="请选择数据" @change="changeSelect">
        <el-option v-for="item in e_circle_data" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsPage',
  data () {
    return {
      myChart: {},
      selectData: '',
      title: '柱状图例',
      Z_data_first: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
      Z_data_second: [5000, 2600, 1300, 1300, 1250, 1500],
      year: [],
      resultData: [
        {
          name: '文书卷/件',
          value: 95,
        },
        {
          name: '专业',
          value: 98,
        },
        {
          name: '科技',
          value: 90,
        },
        {
          name: '会计',
          value: 100,
        },
        {
          name: '干部（死亡）',
          value: 10,
        },
        {
          name: '实物',
          value: 100,
        },
        {
          name: '照片',
          value: 100,
        },
        {
          name: '录音',
          value: 100,
        },
        {
          name: '录像',
          value: 100,
        }
      ],
      e_list: [
        {
          label: '柱状图例',
          value: '柱状图例'
        },
        {
          label: '折线图例',
          value: '折线图例'
        },
        {
          label: '饼状图例',
          value: '饼状图例'
        },
      ],
      e_data: [
        {
          label: '近一周数据统计',
          value: '近一周数据统计'
        },
        {
          label: '近三月份数据统计',
          value: '近三月份数据统计'
        },
        {
          label: '近一年数据统计',
          value: '近一年数据统计'
        }
      ],
      e_line_data: [
        {
          label: '上年统计',
          value: '上年统计'
        },
        {
          label: '本年统计',
          value: '本年统计'
        }
      ],
      e_circle_data: [
        {
          label: '综合测试',
          value: '综合测试'
        },
        {
          label: '经济分析',
          value: '经济分析'
        }
      ]
    }
  },
  methods: {
    handleClick (e, i) {
      this.title = e?.label
      this.selectData = ''
      // 销毁图表
      if (this.myChart.id) {
        this.myChart.dispose()
      }
      switch (i) {
        case 1:
          this.Z_data_first = ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他']
          this.Z_data_second = [5000, 2600, 1300, 1300, 1250, 1500]
          this.selectData = '近一周数据统计'
          this.z_echart_one()
          break;
        case 2:
          this.year = [
            "2023-01",
            "2023-02",
            "2023-03",
            "2023-04",
            "2023-05",
            "2023-06",
            "2023-07",
            "2023-08",
            "2023-09",
            "2023-10",
            "2023-11",
            "2023-12",
          ]
          this.Z_data_first = [10, 55, 2, 3, 16, 45, 12, 30, 30, 20, 19, 2]
          this.Z_data_second = [19, 21, 22, 23, 25, 26, 28, 29, 30, 32, 56, 20]
          this.selectData = '本年统计'
          this.z_echart_two()
          break;
        case 3:
          this.resultData = [
            {
              name: '文书卷/件',
              value: 95,
            },
            {
              name: '专业',
              value: 98,
            },
            {
              name: '科技',
              value: 90,
            },
            {
              name: '会计',
              value: 100,
            },
            {
              name: '干部（死亡）',
              value: 10,
            },
            {
              name: '实物',
              value: 100,
            },
            {
              name: '照片',
              value: 100,
            },
            {
              name: '录音',
              value: 100,
            },
            {
              name: '录像',
              value: 100,
            }
          ];
          this.Z_data_first = ['文书卷/件', '专业', '科技', '会计', '干部（死亡）']
          this.Z_data_second = ['实物', '照片', '录音', '录像']
          this.selectData = '综合测试'
          this.z_echart_three()
          break;
        default:
          this.title = '柱状图例'
          this.selectData = '近一周数据统计'
          this.z_echart_one()
          break;
      }
    },
    z_echart_one () {
      const myChart = echarts.init(this.$refs.echarts);
      this.myChart = myChart
      const option = {
        backgroundColor: '#00265f',
        "title": {
          "text": "政策补贴额度",
          x: "center",
          y: "4%",
          textStyle: {
            color: '#fff',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',

          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '15%',
          right: '3%',
          left: '5%',
          bottom: '12%'
        },
        xAxis: [{
          type: 'category',
          data: this.Z_data_first,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14
            },
          },
        }],
        yAxis: [{
          name: '单位：万元',
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          }
        }],
        series: [{
          type: 'bar',
          data: this.Z_data_second,
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4,
            }
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 80,
              height: 30,
              backgroundColor: 'rgba(0,160,221,0.1)',
              borderRadius: 200,
              position: ['-8', '-60'],
              distance: 1,
              formatter: [
                '    {d|●}',
                ' {a|{c}}     \n',
                '    {b|}'
              ].join(','),
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: '#fff',
                  align: 'center',
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: '#234e6c',
                  align: 'left'
                },
              }
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    z_echart_two () {
      const myChart = echarts.init(this.$refs.echarts);
      this.myChart = myChart

      const option = {
        backgroundColor: '#00265f',
        legend: {
          icon: "circle",
          top: "10%",
          left: "35%",
          itemWidth: 12,
          itemGap: 40,
          textStyle: {
            color: "#fff",
            fontSize: 17,
            fontWeight: "bold",
            padding: [0, 0, 0, 5],
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          top: "15%",
          bottom: "18%",
        },
        xAxis: [
          {
            type: "category",
            data: this.year,
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#3EB4E8",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              // 默认x轴字体大小
              fontSize: 20,
              // margin:文字到x轴的距离
              margin: 10,
              fontWeight: "bold",
            },
            axisPointer: {
              label: {
                padding: [0, 0, 10, 0],
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      // offset: 0.9,
                      offset: 0.86,
                      /*
  0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                          
                          */
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 0.86,
                      color: "#33c0cd", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33c0cd", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                width: 2,
                color: "#3EB4E8",
              },
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#fff",
              },
              // 默认x轴字体大小
              fontSize: 19,
              // margin:文字到x轴的距离
              margin: 15,
            },
            splitLine: {
              show: false,
              width: 0.5,
              color: "#707070",
            },
          },
        ],
        series: [
          {
            name: "所得税",
            type: "line",
            stack: "all",
            data: this.Z_data_first,
            symbolSize: 8,
            symbol: "emptyCircle",
            lineStyle: {
              width: 2,
              color: "#2E9DE1",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0098F7",
                },
                {
                  offset: 0.55,
                  color: "rgba(15,125,195,0.51)",
                },
                {
                  offset: 0.9,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: "#2E9DE1",
                borderColor: "#2E9DE1",
              },
            },
          },
          {
            name: "增值税",
            type: "line",
            stack: "all",
            data: this.Z_data_second,
            symbolSize: 8,
            symbol: "emptyCircle",
            lineStyle: {
              width: 2,
              color: "#F8DC66",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#C69A0A",
                },
                {
                  offset: 0.55,
                  color: "rgba(123,78,8,0.51)",
                },
                {
                  offset: 0.9,
                  color: "rgba(255,255,255,0)",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: "#F8DC66",
                borderColor: "#F8DC66",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    z_echart_three () {
      const myChart = echarts.init(this.$refs.echarts);
      this.myChart = myChart

      //展示数据
      const optionData = [];
      //扇形图颜色数据
      const colorList = [
        { color1: '#c5223b', color2: '#fa768a' },
        { color1: '#de7110', color2: '#fecd70' },
        { color1: '#d09f08', color2: '#FFD145' },
        { color1: '#238483', color2: '#55C27C' },
        { color1: '#45EAFF', color2: '#40ADAC' },
        { color1: '#12B3F8', color2: '#7DE8FF' },
        { color1: '#0176D3', color2: '#13B7FF' },
        { color1: '#015BD3', color2: '#138DFF' },
        { color1: '#7c94e7', color2: '#1e2783' },
      ];
      let sum = 0;
      this.resultData.forEach(item => {
        sum += item.value;
      })
      this.resultData.forEach(item => {
        optionData.push({ value: item.value, name: item.name });
        optionData.push({ name: '', value: sum / 100, itemStyle: { color: 'transparent' } });
      })

      const option = {
        backgroundColor: "#00265f",
        //你的代码
        legend: [
          {
            orient: 'vertical',
            right: '30%',
            top: '26%',
            itemGap: 30,
            textStyle: {
              color: '#ffffff',
              fontSize: 12,
            },
            data: this.Z_data_first,
          },
          {
            orient: 'vertical',
            right: '20%',
            top: '26%',
            itemGap: 30,
            textStyle: {
              color: '#ffffff',
              fontSize: 12,
            },
            data: this.Z_data_second,
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter (params) {
            let res = '';
            const { marker, name, value } = params;
            if (name !== '') {
              res += `${marker}${name}:${value}`
            }
            return res;
          }
        },
        series: [
          {
            type: 'pie',
            roseType: 'radius',
            radius: ['20%', '60%'],
            center: ['30%', '50%'],
            label: {
              position: 'inside',
              formatter (item) {
                if (item.name === '') {
                  return '';
                }
                return `${item.value}`;
              },
              textStyle: {
                fontSize: 16,
                color: '#ffffff'
              }
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color (params) {
                  return colorList[parseInt(params.dataIndex / 2)].color1;
                }
              }
            },
            z: 3,
            data: optionData,
          },
          {
            type: 'pie',
            roseType: 'radius',
            radius: ['20%', '62%'],
            center: ['30%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color (params) {
                  return colorList[parseInt(params.dataIndex / 2)].color2;
                }
              }
            },
            z: 2,
            data: optionData,
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    changeSelect (value) {
      switch (value) {
        case '综合测试':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.resultData = [
            {
              name: '文书卷/件',
              value: 95,
            },
            {
              name: '专业',
              value: 98,
            },
            {
              name: '科技',
              value: 90,
            },
            {
              name: '会计',
              value: 100,
            },
            {
              name: '干部（死亡）',
              value: 10,
            },
            {
              name: '实物',
              value: 100,
            },
            {
              name: '照片',
              value: 100,
            },
            {
              name: '录音',
              value: 100,
            },
            {
              name: '录像',
              value: 100,
            }
          ];
          this.Z_data_first = ['文书卷/件', '专业', '科技', '会计', '干部（死亡）']
          this.Z_data_second = ['实物', '照片', '录音', '录像']
          this.z_echart_three()

          break;
        case '经济分析':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.resultData = [
            {
              name: '房地产',
              value: 999,
            },
            {
              name: '直播电商',
              value: 660,
            },
            {
              name: 'IT互联网',
              value: 600,
            },
            {
              name: '餐饮',
              value: 440,
            },
            {
              name: '设计',
              value: 600,
            },
            {
              name: '滴滴',
              value: 100,
            },
            {
              name: '开源',
              value: 100,
            },
            {
              name: '节流',
              value: 100,
            },
            {
              name: '滴滴',
              value: 100,
            }
          ]
          this.Z_data_first = ['房地产', '直播电商', 'IT互联网', '餐饮', '设计']
          this.Z_data_second = ['滴滴', '开源', '节流', '滴滴']
          this.z_echart_three()

          break;
        case '近一周数据统计':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.Z_data_first = ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他']
          this.Z_data_second = [5000, 2600, 1300, 1300, 1250, 1500]
          this.z_echart_one()
          break
        case '近三月份数据统计':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.Z_data_first = ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他']
          this.Z_data_second = [1500, 1300, 1300, 1250, 1250, 2600]
          this.z_echart_one()
          break
        case '近一年数据统计':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.Z_data_first = ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他']
          this.Z_data_second = [3000, 1200, 8000, 4100, 120, 888]
          this.z_echart_one()
          break
        case '上年统计':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.Z_data_first = [19, 21, 22, 23, 25, 26, 28, 29, 30, 32, 56, 20]
          this.Z_data_second = [25, 26, 30, 28, 27, 29, 28, 40, 35, 25, 24, 15]
          this.year = [
            "2022-01",
            "2022-02",
            "2022-03",
            "2022-04",
            "2022-05",
            "2022-06",
            "2022-07",
            "2022-08",
            "2022-09",
            "2022-10",
            "2022-11",
            "2022-12",
          ]
          this.z_echart_two()
          break
        case '本年统计':
          // 销毁图表
          if (this.myChart.id) {
            this.myChart.dispose()
          }
          this.Z_data_first = [10, 55, 2, 3, 16, 45, 12, 30, 30, 20, 19, 2]
          this.Z_data_second = [19, 21, 22, 23, 25, 26, 28, 29, 30, 32, 56, 20]
          this.year = [
            "2023-01",
            "2023-02",
            "2023-03",
            "2023-04",
            "2023-05",
            "2023-06",
            "2023-07",
            "2023-08",
            "2023-09",
            "2023-10",
            "2023-11",
            "2023-12",
          ]
          this.z_echart_two()
          break
        default:
          break;
      }
    }
  },
  mounted () {
    this.handleClick()
  },
}
</script>

<style lang="less" scoped>
.echart_container {
  display: flex;

  .left {
    width: 150px;
    height: 590px;
    background-color: #456;
    padding-top: 10px;

    .box {
      width: 130px;
      margin: auto;
      height: 120px;
      background-color: #fff;
      margin-bottom: 5px;
      cursor: pointer;

      .box_content {
        margin-left: 20px;
        padding-top: 5px;

        .img {
          width: 60px;
          height: 60px;
          margin-top: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .center {
    position: relative;
    width: 1000px;
    height: 600px;
    margin-left: 20px;

    .z_echart {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }

  .right {
    margin-left: 20px;
  }
}

/deep/ .el-main {
  background: #456 !important;
}
</style>